<template>
  <el-row>
    <el-col :span="2">
      <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @select="menuSelect">
        <template v-for="menu in menus">
          <!-- 如果不是父级菜单，就直接显示菜单本身 -->
          <!-- index直接绑定路由 -->
          <el-menu-item :index="menu.menuRouter" v-if="menu.menuParent == 1">
            <template #title>
              <span>{{menu.menuText}}</span>
            </template>
          </el-menu-item>
          <!-- 如果是父级菜单，就要显示sub-menu -->
          <!-- 如果不是子菜单，index绑定编号 -->
          <el-sub-menu v-else :index="menu.menuId" >
            <template #title>
              <span>{{menu.menuText}}</span>
            </template>
            <el-menu-item-group>
              <!-- 遍历显示子菜单 -->
              <!-- index直接绑定路由 -->
              <el-menu-item v-for="subMenu in menu.children" :index="subMenu.menuRouter">
                {{subMenu.menuText}}
              </el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
        </template>
      </el-menu>
    </el-col>
    <el-col :span="22">

      <router-view/>
    </el-col>
  </el-row>

</template>

<script setup>
import {onMounted, ref} from "vue";
import {useRouter} from "vue-router";
// 导入homeRequest
import homeRequest from "@/api/home.js";
// 申明全局路由对象
let router = useRouter();
// 定义数组保存所有菜单信息
let menus = ref([]);

// 定义函数加载所有的菜单信息
function loadMenus() {
  homeRequest.loadMenus(res => {
    // res就是我们后端响应的数据对象。
    // 在API中我们已经将axios封装的数据解出来了，所以这里的res就是我们的QdResult
    menus.value = res.data;
  })
}

/**
 * 菜单激活事件
 * @param index 菜单的index属性的值，我们设置的就是路由
 */
function menuSelect(index) {
  router.push({path: index});
}

// 申明周期函数：挂在完成之后加载数据
onMounted(() => {
  loadMenus();
})
</script>

<style scoped>

</style>